<template>
  <div class="cooperation">
    <div class="cooperation_main">
      <div class="top">
        <div class="top_main">
          <div class="top_left">
            <div>
              <router-link to="/cooperation">
                <i class="iconfont icon_jd_shouye iconhome"></i>
              </router-link>
            </div>
            <div style="margin-left:12px">
              <span style="cursor: pointer;">
                <router-link to="/">首页</router-link>
              </span>
            </div>
            <div v-if="logined" style="margin-left:12px">
              欢迎您：{{ name }}
              <router-link
                :to="{ path: '/admin' }"
                style="margin-left:10px"
                target="_blank"
                tag="a"
              >个人中心
              </router-link>
              <span
                style="cursor: pointer;margin-left:12px"
                @click="dologinout"
              >
                <a>退出</a>
              </span>
            </div>
            <div v-else style="margin-left:12px">
              <router-link
                :to="{
                  path: '/login',
                  query: { active: 'login', redirect: this.$route.fullPath }
                }"
              >登录</router-link
              >
              <router-link
                style="margin-left:12px"
                :to="{
                  path: '/login',
                  query: { active: 'register', redirect: this.$route.fullPath }
                }"
              >注册
              </router-link>
            </div>
          </div>
          <!-- <div v-show="searchshow" class="top_center">
            <el-input placeholder="支持商品名称和店铺名称搜索" v-model.trim="searchipt" @change="dosearch">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div> -->
          <div class="top_right">
            <!-- <div class="hot">
              <router-link to="/cooperation">客户服务</router-link>
            </div>-->
            <div>
              <router-link to="/admin/auditgoods/mycollect">我的收藏</router-link>
            </div>
            <div>
              <router-link to="/cooperation">商家合作</router-link>
            </div>
            <div>
              <router-link to="/settled">招商入驻</router-link>
            </div>
            <div>
              <router-link to="/help">帮助中心</router-link>
            </div>
            <!-- <div>
              <router-link to="/cooperation">招商助手下载</router-link>
            </div>-->
          </div>
        </div>
      </div>
      <div style="width:100%;background-color:#fff;">
        <div class="nav">
          <logo></logo>
          <!-- <div class="link_box">
          <router-link :to="{path:'/'}" >首页</router-link>
          <router-link :to="{path:'/'}" >申请入驻</router-link>
          <router-link :to="{path:'/'}" >京粉风云榜</router-link>
          <router-link :to="{path:'/'}" >帮助中心</router-link>
        </div> -->
          <div class="login_box">
            <div v-if="logined" style="font-size: 14px;">
              您好!<span style="color: #EC414D;margin-right:10px;">{{
                name
              }}</span>
              <el-button type="danger" round>入驻京粉客</el-button>
            </div>
            <div v-else class="nologined">
              <el-button plain round>
                <router-link
                  :to="{
                    path: '/login',
                    query: { active: 'login', redirect: this.$route.fullPath }
                  }"
                >登 录</router-link
                >
              </el-button>
              <el-button type="danger" round>
                <router-link
                  :to="{
                    path: '/login',
                    query: {
                      active: 'register',
                      redirect: this.$route.fullPath
                    }
                  }"
                >注 册</router-link
                >
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="ranking_main">
        <div class="explain">
          <div>榜单说明</div>
          <b></b>
          <p>
            实力榜是系统根据上月招商京粉在平台的
            <span
              style="color:#F8E71C"
            >放单数量、商品质量、信用分数、推广情况</span
            >等数据进行综合计算得出的排名，是<span
              style="color:#F8E71C"
            >招商京粉</span
            >实力和能力等最好证明！榜单每月更新。
          </p>
        </div>
        <div class="achievement">
          <div class="achievement_main">
            <div class="show_date">
              <div>
                {{
                  moment(new Date())
                    .add('year', 0)
                    .format('YYYY.M')
                }}
              </div>
              <p>榜单成就</p>
            </div>
            <div class="show_num">
              <p class="show_up">{{ form.goods_num }}</p>
              <p class="show_down">
                <i class="el-icon-s-promotion icon"></i
                ><span>提交商品款数</span>
              </p>
            </div>
            <div class="show_num">
              <p class="show_up">{{ form.shop_num }}</p>
              <p class="show_down">
                <i class="el-icon-s-shop icon"></i><span>服务商家</span>
              </p>
            </div>
            <div class="show_num">
              <p class="show_up">{{ form.coupon_num }}</p>
              <p class="show_down">
                <i class="el-icon-s-ticket icon"></i><span>券发放量</span>
              </p>
            </div>
            <div class="show_num">
              <p class="show_up">{{ form.price }}</p>
              <p class="show_down">
                <i class="el-icon-money icon"></i><span>预估交易额</span>
              </p>
            </div>
          </div>
        </div>
        <div class="topthree">
          <div class="topthree_box top2" v-if="form.top_array[1]">
            <div class="top_main">
              <div class="useravatar">
                <span>{{ form.top_array[1].nickname }}</span>
                <p></p>
                <img :src="form.top_array[1].user_img" alt="" srcset="" />
              </div>
              <p class="isfirm">企业账号</p>
              <p class="adept">{{ form.top_array[1].team_desc }}</p>
              <div class="userinfo">
                <div class="info_ox">
                  <div>
                    {{
                      moment(form.top_array[1].create_at).format('YYYY-MM-DD')
                    }}
                  </div>
                  <p>入驻时间</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top_array[1].count }}</div>
                  <p>放单量</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top_array[1].fraction }}</div>
                  <p>信用分</p>
                </div>
              </div>
              <div class="bot_v">
                <div class="lv_box">
                  <span>等级:</span>
                  <!-- <i></i> -->
                  <span style="font-weight: 600;font-size:16px;">{{
                    form.top_array[1].level
                  }}</span>
                </div>
                <a>QQ:{{ form.top_array[1].qq }}</a>
              </div>
            </div>
          </div>
          <div class="topthree_box top1" v-if="form.top_array[0]">
            <div class="topmian">
              <div class="line_shadow"></div>
              <div class="top_main">
                <div class="useravatar">
                  <span>{{ form.top_array[0].nickname }}</span>
                  <p></p>
                  <img :src="form.top_array[0].user_img" alt="" srcset="" />
                </div>
                <p class="isfirm">企业账号</p>
                <p class="adept">{{ form.top_array[0].team_desc }}</p>
                <div class="userinfo">
                  <div class="info_ox">
                    <div>
                      {{
                        moment(form.top_array[0].create_at).format('YYYY-MM-DD')
                      }}
                    </div>
                    <p>入驻时间</p>
                  </div>
                  <div class="info_ox">
                    <div>{{ form.top_array[0].count }}</div>
                    <p>放单量</p>
                  </div>
                  <div class="info_ox">
                    <div>{{ form.top_array[0].fraction }}</div>
                    <p>信用分</p>
                  </div>
                </div>
                <div class="bot_v">
                  <div class="lv_box">
                    <span>等级:</span>
                    <!-- <i></i> -->
                    <span style="font-weight: 600;font-size:16px;">{{
                      form.top_array[0].level
                    }}</span>
                  </div>
                  <a>QQ:{{ form.top_array[0].qq }}</a>
                </div>
              </div>
              <div class="line_shadow line2"></div>
            </div>
          </div>
          <div class="topthree_box top3" v-if="form.top_array[2]">
            <div class="top_main">
              <div class="useravatar">
                <span>{{ form.top_array[2].nickname }}</span>
                <p></p>
                <img :src="form.top_array[2].user_img" alt="" srcset="" />
              </div>
              <p class="isfirm">企业账号</p>
              <p class="adept">{{ form.top_array[2].team_desc }}</p>
              <div class="userinfo">
                <div class="info_ox">
                  <div>
                    {{
                      moment(form.top_array[2].create_at).format('YYYY-MM-DD')
                    }}
                  </div>
                  <p>入驻时间</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top_array[2].count }}</div>
                  <p>放单量</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top_array[2].fraction }}</div>
                  <p>信用分</p>
                </div>
              </div>
              <div class="bot_v">
                <div class="lv_box">
                  <span>等级:</span>
                  <!-- <i></i> -->
                  <span style="font-weight: 600;font-size:16px;">{{
                    form.top_array[2].level
                  }}</span>
                </div>
                <a>QQ:{{ form.top_array[2].qq }}</a>
              </div>
            </div>
          </div>
        </div>
        <div class="rankingList" v-if="form.top_array.length > 2">
          <div class="list_main">
            <div class="rank_box">
              <el-row
                type="flex"
                class="row-bg"
                justify="start"
                align="middle"
                style="flex-wrap: wrap;"
              >
                <el-col
                  :span="8"
                  v-for="(item, index) in form.top_array.slice(3)"
                  :key="index"
                >
                  <div class="top_main">
                    <div class="useravatar">
                      <img :src="item.user_img" alt="" srcset="" />
                      <div class="user_right">
                        <p>{{ item.nickname }}</p>
                        <p class="adept">{{ item.team_desc }}</p>
                        <p class="isfirm">企业账号</p>
                      </div>
                    </div>
                    <div class="rank_mark">{{ index + 4 }}</div>
                    <div class="userinfo">
                      <div class="info_ox">
                        <div>
                          {{ moment(item.create_at).format('YYYY-MM-DD') }}
                        </div>
                        <p>入驻时间</p>
                      </div>
                      <div class="info_ox">
                        <div>{{ item.count }}</div>
                        <p>放单量</p>
                      </div>
                      <div class="info_ox">
                        <div>{{ item.fraction }}</div>
                        <p>信用分</p>
                      </div>
                    </div>
                    <div class="bot_v">
                      <div class="lv_box">
                        <span>等级:</span>
                        <!-- <i></i> -->
                        <span style="font-weight: 600;font-size:16px;">{{
                          item.level
                        }}</span>
                      </div>
                      <a>QQ:{{ item.qq }}</a>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="sidebar" v-if="$route.name!=='allgoods'&&$route.name!=='realtimelist'" >
        <!-- <div class="pagebox">{{ currentPage }}/{{ max_page }}</div> -->
        <div class="btns">
          <!-- <p @click="gonext(1)">
          向上一页
        </p>
        <p @click="gonext(2)">
          向下一页
        </p> -->
          <p>
            <router-link to="/help">
              帮助中心
            </router-link>
          </p>
          <p>
            建议反馈
          </p>
          <p>
            <a href="tencent://message/?Site=dounm.com&uin=756589657&Menu=yes" target="_blank" rel="noopener noreferrer">联系客服</a> 
          </p>
        <!-- <p>
          一键复制
        </p> -->
        </div>
        <backtop
          transitionName="fade"
          :customStyle="backtopStyle" 
          :visibilityHeight="0" 
          :backPosition="0"
        ></backtop>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import moment from 'moment'
import logo from '@/components/logo.vue'
import backtop from '@/components/backtop'
import footerbox from '@/components/footerbox.vue'


import { getCachelist,getTrueCachelist } from '@/api/cache'

export default {
  name: 'Cooperation',
  components: {
    logo,
    backtop,
    footerbox
  },
  data() {
    return {
      moment,
       backtopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      },
      form: {
        goods_num: 0,
        shop_num: 0,
        coupon_num: 0,
        price: 0,
        top_array: [
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          },
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          },
          {
            id: '',
            count: '',
            create_at: '',
            fraction: 100,
            level: '',
            nickname: '',
            qq: '',
            team_desc: '',
            user_img: '',
            sort: ''
          }
        ]
      },
      searchshow: false,
      name: '', //用户名
      logined: this.$ls.get('token') ? true : false,
      searchipt: '' //搜索
    }
  },
  watch: {
    searchipt: {
      handler() {
        // console.log("内容", this.searchipt);
        this.$ls.set('search', this.searchipt)
      }
      // immediate: true,  //刷新加载 立马触发一次handler
      // deep: true  // 可以深度检测到对象的属性值的变化
    }
  },
  computed: {},
  created() {
    if (this.$ls.get('userinfo')) {
      this.logined = true
      this.name = this.$ls.get('userinfo').nickname
    }
    if (this.$ls.get('search')) {
      // console.log(this.$ls.get("search"));
      this.searchipt = this.$ls.get('search')
    }
    this.getTrueCachelist()
  },
  mounted() {
    // this.$router.afterEach(() => {
    //   // to, from, next
    //   window.scrollTo(0, 0)
    // })
    // window.addEventListener('scroll', this.showIpt)
  },
  methods: {
    //获取商家合作榜真实
    getTrueCachelist() {
      getTrueCachelist()
        .then(res => {
          if (res.code == 200) {
            console.log('商家合作榜返回', res)
            this.form.goods_num = res.data.count
            this.form.shop_num = res.data.shop_num
            this.form.coupon_num = res.data.today_num
            this.form.price = res.data.price
            this.form.top_array = res.data.top
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取商家合作榜虚拟
    getCachelist() {
      getCachelist()
        .then(res => {
          if (res.code == 200) {
            console.log('商家合作榜返回', res)
            this.form = res.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    dologinout() {
      this.$ls.clear()
      if (this.$route.name === 'homepage') {
        this.$refs.allgoods.logined = false
      }
      this.$message.success('退出成功')
      this.logined = false
    },
    clearsearch() {
      this.searchipt = ''
      this.$ls.remove('search')
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.closetags('search')
        this.$refs.allgoods.getGoodsList()
      }
    },
    showIpt() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 150
      ) {
        // 页面高度大于200执行操作;
        this.searchshow = true
      } else {
        this.searchshow = false
        // 页面高度小于200执行操作;
      }
    },
    dosearch() {
      console.log(this.searchipt)
      // console.log(this.$route);
      if (this.searchipt == '') {
        this.$ls.remove('search')
      }
      if (this.$route.name === 'allgoods') {
        this.$refs.allgoods.search({
          search: this.searchipt
        }) // 调用子组件的方法childClick
        // this.$router.go(0);
      } else {
        this.$router.push({
          path: '/cooperation/allgoods'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cooperation {
  width: 100%;

  .cooperation_main {
    // width: 1280px;
    margin: 0 auto;

    .top {
      width: 100%;
      height: 40px;
      font-size: 14px;
      line-height: 40px;
      position: sticky;
      top: 0;
      background-color: #f8f8f8;
      z-index: 99;

      .top_main {
        // background-color: #e6e6e6;
        font-size: 12px;
        width: 1280px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgb(136, 134, 134);

        .top_left {
          // width: 220px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .top_center::v-deep {
          .el-input__inner {
            height: 30px;
            width: 350px !important;
            // padding-left: 120px !important;
          }

          .el-radio-button__inner {
            padding: 8px 15px;
          }

          .el-radio-group {
            margin-left: -4px;
          }

          .el-input__icon {
            line-height: 30px;
          }
        }

        .top_right {
          width: 250px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .hot {
            position: relative;

            img {
              position: absolute;
              top: 0;
              right: -8px;
            }
          }
        }
      }
    }

    .nav {
      width: 1280px;
      height: 68px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;

      .link_box {
        a {
          padding: 0 8px;
        }
      }

      .login_box {
        /deep/.el-button {
          padding: 8px 15px;
        }

        .nologined {
          a {
            color: #606266;
          }

          a:hover {
            color: #3a8ee6;
          }

          /deep/.el-button--danger {
            a {
              color: #fff;
              background-color: #f56c6c;
              border-color: #f56c6c;
            }
          }

          /deep/.el-button {
            padding: 5px 15px;
          }
        }
      }
    }

    .ranking_main {
      width: 100%;
      min-height: 1600px;
      // background: url('~@/assets/imgs/ranking_bg.jpg') no-repeat top;
      background: url('//img.letuilm.com/2020/07/91cb082020072914455070997.jpg')
        no-repeat top;
      background-color: #2a1a96;

      .explain {
        padding-top: 650px;
        color: #ff8dff;
        width: 600px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;

        div {
          font-size: 18px;
          padding-right: 10px;
        }

        b {
          width: 1px;
          overflow: hidden;
          height: 42px;
          position: relative;
          top: 4px;
          z-index: 0;
          background: #ff8dff;
        }

        p {
          line-height: 23px;
          padding-left: 10px;
          font-size: 14px;
        }
      }

      .achievement {
        width: 1045px;
        height: 138px;
        margin: 0 auto;
        background: url('~@/assets/imgs/ran_icon.png') no-repeat center;

        .achievement_main {
          width: 850px;
          height: 138px;
          margin: 0 auto;
          padding-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: aliceblue;

          .show_num {
            .show_up {
              height: 42px;
              line-height: 42px;
              font-size: 36px;
              color: #ffdd5f;
              display: block;
              text-align: center;
            }

            .show_down {
              font-size: 14px;
              text-align: center;
              line-height: 21px;
              display: flex;
              align-items: center;

              /deep/.icon {
                font-size: 20px;
                color: #ffaeae;
              }
            }
          }

          .show_date {
            font-size: 24px;

            p {
              font-size: 30px;
            }
          }
        }
      }

      .topthree {
        width: 1060px;
        height: 355px;
        margin: auto auto 40px;
        padding-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        .topthree_box {
          margin-top: 40px;

          .top_main {
            width: 351px;
            height: 300px;
            background: #fff;
            padding: 0 15px;
            border-radius: 20px 0 0 20px;
            cursor: pointer;
            z-index: 2;

            .useravatar {
              display: block;
              width: 176px;
              height: 160px;
              position: relative;
              overflow: hidden;
              margin: auto;
              color: #999;
              top: 0;

              p {
                background: url('~@/assets/imgs/topthree.png') -352px 0;
                width: 176px;
                height: 165px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
              }

              span {
                height: 35px;
                line-height: 25px;
                text-align: center;
                z-index: 50;
                bottom: 0;
                position: absolute;
                width: 100%;
                display: block;
                font-size: 14px;
                color: #496b87;
              }

              img {
                width: 100px;
                height: 100px;
                object-fit: fill;
                display: block;
                margin: auto;
                position: relative;
                top: 30px;
                z-index: 0;
              }
            }

            .isfirm {
              background: url('~@/assets/imgs/v_icon.png') no-repeat center;
              background-size: 100%;
              width: 70px;
              color: #fff;
              text-align: center;
              display: block;
              height: 16px;
              padding-left: 10px;
              margin: auto;
              position: relative;
              z-index: 2;
              font-size: 12px;
            }

            .adept {
              font-size: 12px;
              color: #a86bdd;
              text-align: center;
              height: 30px;
              line-height: 30px;
            }

            .userinfo {
              position: relative;
              height: 40px;
              line-height: 20px;
              font-size: 12px;
              color: #333c48;

              .info_ox {
                float: left;
                width: 33.2%;
                text-align: center;
                // position: relative;
                border-right: 1px solid #dfdfdf;
                z-index: 0;

                div {
                  color: #fc9f1f;
                  font-size: 16px;
                  display: block;
                }
              }

              .info_ox:nth-last-child(1) {
                border: none;
              }
            }

            .bot_v {
              width: 285px;
              margin: auto;
              padding-top: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .lv_box {
                display: flex;
                align-items: center;
              }

              span {
                // float: left;
                line-height: 22px;
              }

              i {
                display: inline-block;
                background: url('~@/assets/imgs/lv.png') left top;
                width: 45px;
                height: 20px;
              }

              a {
                // float: right;
                border: 1px solid #5294e0;
                color: #5294e0;
                border-radius: 15px;
                font-size: 14px;
                padding: 3px 10px;
              }

              a:hover {
                color: #fff;
                border-color: #5294e0;
                background: #5294e0;
              }
            }
          }
        }

        .top1 {
          margin-top: 0px;
          position: relative;

          .topmian {
            display: flex;
          }

          .line_shadow {
            width: 6px;
            height: 180px;
            background-color: #d8d8d8;
            transform: rotate(-2deg);
            position: absolute;
            top: 40px;
            left: -3px;
          }

          .line2 {
            left: 348px;
            transform: rotate(2deg);
          }

          .top_main {
            border: none;
            border-radius: 20px 20px 0 0;
            z-index: 5;
            top: 30px;
            height: 340px;

            .useravatar {
              top: 20px;
              margin-bottom: 35px;
              height: 155px;

              span {
                line-height: 35px;
              }

              p {
                background-position: 0 0;
              }
            }

            .adept {
              margin-bottom: 10px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .userinfo {
              margin-top: 10px;
            }
          }
        }
        .top2 {
          .adept {
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis;

          }
        }
        .top3 {
          .adept {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .top_main {
            border-radius: 0 20px 20px 0;

            // top: 60px;
            // height: 270px;
            .useravatar {
              span {
                bottom: 13px;
              }

              p {
                background-position: -176px 0;
              }
            }
          }
        }

        .topthree_box:hover {
          .top_main {
            background: #f7eeff;
          }
        }

        .top2:hover {
          .useravatar {
            p {
              background-position: -352px -176px;
            }
          }
        }

        .top1:hover {
          .useravatar {
            p {
              background-position: 0 -176px;
            }
          }
        }

        .top3:hover {
          .useravatar {
            p {
              background-position: -176px -176px;
            }
          }
        }
      }

      .rankingList {
        width: 1090px;
        margin: auto;
        background-color: #8f39dc;
        padding: 20px;
        border-radius: 20px;
        overflow: hidden;
        .list_main {
          .rank_box {
            // width: 33.3%;
            // background-color: #fff;

            .top_main {
              width: 339px;
              margin: 8px auto;
              height: 260px;
              background: #fff;
              padding: 0 15px;
              cursor: pointer;
              z-index: 2;
              position: relative;
              overflow: hidden;
              border-radius: 12px;

              .useravatar {
                height: 140px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img {
                  display: inline-block;
                  width: 60px;
                  height: 60px;
                  margin-left: 35px;
                  border: 2px solid #c2d2e0;
                  // float: left;
                  overflow: hidden;
                  border-radius: 200px;
                }

                .user_right {
                  margin-left: 10px;
                  text-align: left;
                  .adept {
                    width: 189px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                  }
                }
              }

              .rank_mark {
                position: absolute;
                right: -50px;
                top: -50px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                padding: 43px 45px 10px 10px;
                font-size: 24px;
                color: #9013fe;
                background: #fedf65;
                text-align: center;
                line-height: 50px;
              }

              .isfirm {
                background: url('~@/assets/imgs/v_icon.png') no-repeat center;
                background-size: 100%;
                width: 70px;
                color: #fff;
                text-align: center;
                display: block;
                height: 16px;
                padding-left: 10px;
                margin: auto;
                position: relative;
                z-index: 2;
                font-size: 12px;
                float: left;
              }

              .adept {
                font-size: 12px;
                color: #a86bdd;
                margin-bottom: 5px;
              }

              .userinfo {
                position: relative;
                height: 40px;
                line-height: 20px;
                font-size: 12px;
                color: #333c48;

                .info_ox {
                  float: left;
                  width: 33.2%;
                  text-align: center;
                  // position: relative;
                  border-right: 1px solid #dfdfdf;
                  z-index: 0;

                  div {
                    color: #fc9f1f;
                    font-size: 16px;
                    display: block;
                  }
                }

                .info_ox:nth-last-child(1) {
                  border: none;
                }
              }

              .bot_v {
                width: 300px;
                height: 50px;
                margin: 30px auto 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .lv_box {
                  display: flex;
                  align-items: center;
                }

                span {
                  // float: left;
                  line-height: 22px;
                }

                i {
                  display: inline-block;
                  background: url('~@/assets/imgs/lv.png') left top;
                  width: 45px;
                  height: 20px;
                }

                a {
                  // float: right;
                  border: 1px solid #5294e0;
                  color: #5294e0;
                  border-radius: 15px;
                  font-size: 14px;
                  padding: 3px 10px;
                }

                a:hover {
                  color: #fff;
                  border-color: #5294e0;
                  background: #5294e0;
                }
              }
            }
            .top_main:hover{
              background-color: #f7eeff;
            }
          }
        }
      }
    }
       .sidebar {
      position: fixed;
      top: 50%;
      right: 20px;
      // border: 1px solid #E7E7E7;
      margin: 10px 0;
      width: 50px;
      border-radius: 3px;
      box-shadow: 0 0 6px #eee;
      .pagebox{
        width: 100%;
        color: #4d75ff;
        font-size: 14px;
        padding-bottom: 6px;
        text-align: center;
        background-color: #F6F6F6;
      }
      .btns{
        display:flex;
        flex-wrap:wrap;
        background-color: #fff;
      }
      /deep/.el-icon-download{
        transform: rotate(180deg);
        border: 1px solid #E7E7E7;
        display: block;
        width: 50px;
        height: 43px;
        line-height: 40px;
        background: #fff;
        border-radius: 3px;
        font-size: 26px;
        font-weight: bold;
        color: #4d75ff;
        cursor: pointer;
        margin-top: 10  px;
        // box-shadow: 0 0 12px #eee;
      }
      p {
        display: block;
        width: 100%;
        font-size: 12px;
        color: #666;
        border-top: 1px solid #E7E7E7;
        padding: 6px 6px;
        letter-spacing: 2px;
        text-align: center;
        cursor: pointer;
      }
      p:hover{
        color: #4d75ff;
      }
   }
  }
}
</style>
